<template>
  <div class="left_agriculture">
    <cn-title title="智慧农业大数据"></cn-title>
    <div class="more_data">
      <div class="left_box">
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          智慧农业分析
          <span style="width: 360px"></span>
        </div>
        <div class="top_box">
          <div id="leftAgricultureChart1" class="chart_1"></div>
          <div id="leftAgricultureChart2" class="chart_2"></div>
        </div>
        <div class="bottom_box">
          <div class="more_info">
            <cn-label label="种植业" />
            <div class="info_box d_a_c">
              <div class="left_info d_c">溯源数据 <br />种植业</div>
              <img class="right_info" src="/img/yz_qrcode.png" />
            </div>
          </div>
          <div class="more_info">
            <cn-label label="养植业" />
            <div class="info_box d_a_c">
              <div class="left_info d_c">溯源数据 <br />养植业</div>
              <img class="right_info" src="/img/yz_qrcode.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="right_box">
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          智慧农业
          <span style="width: 120px"></span>
          <div
            v-for="item in ny_tabs"
            :key="item.value"
            :class="['btn', ny_active === item.value ? 'active_btn' : '']"
            @click="nySlect(item.value)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="right_top_box">
          <div class="chart_box">
            <select
              class="select_option"
              v-model="selectActive"
              @change="onChange()"
            >
              <option
                v-for="(item, index) in selectList"
                :key="index"
                :value="item.value"
              >
                {{ item.name }}
              </option>
            </select>
            <div id="leftAgricultureChart3" class="chart_3"></div>
          </div>
          <div class="top_video">
            <div class="video_box">
              <div class="video_container d_c">
                <video ref="videoPlayer" class="video">
                  <source src="/test.mp4" type="video/mp4" />
                  <source src="/test.mp4" type="video/webm" />
                  <source src="/test.mp4" type="video/ogg" />
                </video>
                <img
                  class="p_c"
                  src="@/assets/img/icon_play.png"
                  alt=""
                  @click="toPlay('/test.mp4')"
                />
              </div>
              <div class="v_title">小麦种植视频</div>
            </div>
            <div class="video_box">
              <div class="video_container d_c">
                <video class="video">
                  <source src="/test.mp4" type="video/mp4" />
                  <source src="/test.mp4" type="video/webm" />
                  <source src="/test.mp4" type="video/ogg" />
                </video>
                <img
                  class="p_c"
                  src="@/assets/img/icon_play.png"
                  alt=""
                  @click="toPlay('/test.mp4')"
                />
              </div>
              <div class="v_title">羔羊肉视频</div>
            </div>
          </div>
        </div>
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          智慧大棚
          <span></span>
          <div
            v-for="item in dp_tabs"
            :key="item.value"
            :class="['btn', dp_active === item.value ? 'active_btn' : '']"
            @click="dpSlect(item.value)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="right_bottom_box">
          <div class="zj_info">
            <div class="zj_top">
              <div class="avatar d_c">
                <img src="/img/ldy_avatar.png" alt="" />
              </div>
              <div class="more">
                <div class="name"><span>刘大勇</span></div>
                <div class="desc">
                  <div>男</div>
                  <div>52岁</div>
                </div>
              </div>
            </div>
            <div class="zj_bottom">
              <div class="info_title">
                <span>简介</span>
                <img class="right_img" src="@/assets/img/r_b.png" alt="" />
              </div>
              <div class="info_desc row_2_ellipsis">
                刘大勇时怀化市著名的种植庄家，从
                事该行业三十多年，有着丰富刘大勇时怀化市著名的种植庄家，从
                事该行业三十多年，有着丰富
              </div>
            </div>
          </div>
          <div class="zj_video">
            <div class="video_box">
              <div class="video_container d_c">
                <video class="video">
                  <source src="/test.mp4" type="video/mp4" />
                  <source src="/test.mp4" type="video/webm" />
                  <source src="/test.mp4" type="video/ogg" />
                </video>
                <img
                  class="p_c"
                  src="@/assets/img/icon_play.png"
                  alt=""
                  @click="toPlay('/test.mp4')"
                />
              </div>
              <div class="v_title">案例视频</div>
            </div>
            <div class="video_info">
              <div class="info_title">
                <span>简介</span>
                <img class="right_img" src="@/assets/img/r_b.png" alt="" />
              </div>
              <div class="info_desc row_4_ellipsis">
                刘大勇时怀化市著名的种植庄家，从
                事该行业三十多年，有着丰富刘大勇时怀化市著名的种植庄家，从
                事该行业三十多年，有着丰富
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <cn-video :show="openVideo" :src="videoSrc" @close="closeVideo" />
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import CnLabel from "../common/CnLabel.vue";
import CnVideo from "../common/CnVideo.vue";
export default {
  components: {
    CnTitle,
    CnLabel,
    CnVideo,
  },
  data() {
    return {
      selectActive: "1",
      selectList: [{ name: "湿温度", value: "1" }],
      moreInfo: [
        {
          title: "种植业",
          qrcode: "",
        },
      ],
      ny_tabs: [
        { name: "小麦", value: 1 },
        { name: "玉米", value: 2 },
        { name: "土豆", value: 3 },
        { name: "牛", value: 4 },
        { name: "羊", value: 5 },
      ],
      ny_active: 1,
      dp_tabs: [
        { name: "种植专家", value: 1 },
        { name: "养殖专家", value: 2 },
        { name: "种养殖专业户", value: 3 },
        { name: "种养殖人才", value: 4 },
      ],
      dp_active: 1,
      videoSrc: "",
      openVideo: false,
    };
  },
  mounted() {
    this.renderAgricultureChart1();
    this.renderAgricultureChart2();
    this.renderAgricultureChart3();
  },
  methods: {
    closeVideo() {
      this.videoSrc = "";
      this.openVideo = false;
    },
    toPlay(src) {
      // this.$refs[elem].paused === true
      //   ? this.$refs[elem].play()
      //   : this.$refs[elem].pause();
      this.openVideo = true;
      this.videoSrc = src;
    },
    onChange() {
      console.log(this.selectActive);
    },
    nySlect(value) {
      this.ny_active = value;
    },
    dpSlect(value) {
      this.dp_active = value;
    },
    renderAgricultureChart1() {
      let myChart = this.$echarts.init(
        document.getElementById("leftAgricultureChart1")
      );
      let option = {
        grid: {
          left: "5%",
          right: "6%",
          bottom: "0%",
          top: "20%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["种植产量", "种植面积"],
          top: 10,
          itemGap: 20,
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
          textStyle: {
            fontSize: 12,
            color: "#AED0EF",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "小麦",
              "玉米",
              "花生",
              "土豆",
              "晋之坊 小米",
              "龙山 山绿豆",
            ],
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            splitNumber: 4,
            // interval: 40,
          },
          //   {
          //     type: "value",
          //     name: "种植面积",
          //     min: 0,
          //     interval: 100,
          //   },
        ],
        series: [
          {
            name: "种植产量",
            type: "bar",
            barWidth: 8,
            data: [110, 135, 120, 186, 138, 156],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#000C34",
                    offset: 0,
                  },
                  {
                    color: "#014076",
                    offset: 0.5,
                  },
                  {
                    color: "#0291D3",
                    offset: 0.78,
                  },
                  {
                    color: "#03B8FC",
                    offset: 1,
                  },
                ],
              },
            },
          },
          {
            name: "种植面积",
            type: "line",
            // yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [80, 165, 124, 81, 162, 127],
            itemStyle: {
              color: "#0AFBFC",
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderAgricultureChart2() {
      let myChart = this.$echarts.init(
        document.getElementById("leftAgricultureChart2")
      );
      let option = {
        grid: {
          left: "5%",
          right: "6%",
          bottom: "0%",
          top: "20%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["养殖产量", "养殖面积"],
          textStyle: {
            fontSize: 12,
            color: "#AED0EF",
          },
          top: 10,
          itemGap: 20,
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["羔羊肉", "猪", "鸡"],
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            axisLabel: {
              color: "#AED0EF",
              fontSize: 12,
              fontFamily: "Bebas",
            },
          },
        ],
        yAxis: [
          {
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            splitNumber: 4,
            axisLabel: {
              color: "#AED0EF",
              fontSize: 12,
              fontFamily: "Bebas",
            },
          },
        ],
        series: [
          {
            name: "养殖产量",
            type: "pictorialBar",
            barWidth: 30,
            barCategoryGap: "50%",
            symbol: "path://M0,10 L10,10 L5,0 L0,10 z",
            symbolOffset: [-20, 0],
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#000C34",
                    offset: 0,
                  },
                  {
                    color: "#014076",
                    offset: 0.5,
                  },
                  {
                    color: "#0291D3",
                    offset: 0.78,
                  },
                  {
                    color: "#03B8FC",
                    offset: 1,
                  },
                ],
              },
            },
          },
          {
            name: "养殖面积",
            type: "pictorialBar",
            barWidth: 30,
            barCategoryGap: "50%",
            symbol: "path://M0,10 L10,10 L5,0 L0,10 z",
            symbolOffset: [10, 0],
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#001249",
                    offset: 0,
                  },
                  {
                    color: "#03597F",
                    offset: 0.5,
                  },
                  {
                    color: "#0697AF",
                    offset: 0.78,
                  },
                  {
                    color: "#09EBF0",
                    offset: 1,
                  },
                ],
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderAgricultureChart3() {
      let myChart = this.$echarts.init(
        document.getElementById("leftAgricultureChart3")
      );
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(3, 16, 42, 0.85)",
          borderColor: "rgba(114, 190, 253, 0.6)",
          borderWidth: 1,
          padding: 12,
          textStyle: {
            color: "#fff",
          },
        },
        color: ["#F6AD04"],
        grid: {
          left: "2%",
          right: "4%",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.45)",
            },
          },
          axisLabel: {
            // interval:0,
            fontSize: 11,
            color: "#BAE7FF",
          },
          axisTick: {
            show: false,
          },
          data: ["一月", "二月", "三月", "四月", "五月"],
        },
        yAxis: {
          type: "value",
          min: 0,
          minInterval: 1,
          nameTextStyle: {
            fontSize: 12,
            color: "#BAE7FF",
            align: "center",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
              type: "dashed",
            },
          },
          splitNumber: 4,
          splitArea: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            fontFamily: "Bebas",
            color: "#AED0EF",
          },
        },
        series: [
          {
            type: "line",
            // showSymbol: false,
            smooth: true,
            data: [10, 20, 9, 30, 10], // 纵坐标数据
            areaStyle: {
              //区域填充样式
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(246,173,4,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(246,173,4, 0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
  },
};
</script>

<style lang="scss" scoped>
.left_agriculture {
  width: 100%;
  height: 453px;
  .more_data {
    display: flex;
    height: calc(100% - 45px);
    padding: 10px 0;
    .left_box {
      width: 530px;
      height: 100%;
      .title {
        color: #fff;
        font-size: 18px;
        text-align: left;
        height: 24px;
        img {
          width: 15px;
          height: auto;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          width: 80px;
          border-top: 1px dashed #aed0ef;
          margin: 0 20px;
          transform: translateY(-50%);
          margin: 0 5px 0 20px;
        }
      }
      .top_box {
        height: 200px;
        width: 100%;
        display: flex;
        .chart_1 {
          height: 100%;
          width: 270px;
        }
        .chart_2 {
          height: 100%;
          width: 260px;
        }
      }
      .bottom_box {
        height: 177px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        .more_info {
          width: 45%;
          height: 100%;
          .info_box {
            width: 100%;
            height: 143px;
            background-image: url("@/assets/img/kuang.png");
            background-size: cover;
            justify-content: space-between;
            padding: 10px 10px 10px 20px;
            .left_info {
              width: 55px;
              height: 108px;
              writing-mode: tb-rl;
              color: #fff;
              background: linear-gradient(
                0deg,
                rgba(0, 155, 255, 0) 0%,
                rgba(0, 155, 255, 0.95) 54%,
                rgba(0, 155, 255, 0) 100%
              );
              letter-spacing: 2.8px;
              font-size: 14px;
            }
            .right_info {
              height: 108px;
              width: 108px;
            }
          }
        }
      }
    }

    .right_box {
      width: 530px;
      height: 100%;
      .btn {
        min-width: 35px;
        padding: 0 4px;
        height: 19px;
        background: linear-gradient(
          0deg,
          rgba(0, 155, 255, 0.57) 0%,
          rgba(0, 155, 255, 0) 100%
        );
        border: 1px solid #009bff;
        opacity: 0.46;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        margin-right: 10px;
        color: #009bff;
        cursor: pointer;
      }
      .active_btn {
        opacity: 1;
      }
      .right_top_box,
      .right_bottom_box {
        height: 176px;
        width: 100%;
        display: flex;
      }
      .right_bottom_box {
        .zj_video {
          width: 315px;
          display: flex;
          .video_info {
            width: 177px;
            padding: 10px 15px;
            .info_title {
              color: #009bff;
              letter-spacing: 1.2px;
              font-size: 12px;
              text-align: left;
              .right_img {
                vertical-align: baseline;
                margin-left: 6px;
              }
            }
            .info_desc {
              width: 144px;
              height: 100px;
              font-size: 12px;
              font-family: SourceHanSansSC, SourceHanSansSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #aed0ef;
              line-height: 24px;
            }
          }
          .video_box {
            .video_container {
              padding: 8px;
              margin: 14px 0;
              background-image: url("@/assets/img/kuang2.png");
              background-size: cover;
              height: 115px;
              position: relative;
              .video {
                width: 122px;
                height: auto;
              }
              img {
                width: 50px;
                height: 50px;
                z-index: 10;
                cursor: pointer;
              }
            }

            .v_title {
              width: 100%;
              height: 20px;
              text-align: center;
              line-height: 20px;
              color: #ffffff;
              font-size: 12px;
              background-image: url("@/assets/img/video_title_bg.png");
              background-size: cover;
            }
          }
        }
        .zj_info {
          width: 215px;
          .zj_bottom {
            .info_title {
              color: #009bff;
              letter-spacing: 1.2px;
              font-size: 12px;
              text-align: left;
              .right_img {
                vertical-align: baseline;
                margin-left: 6px;
              }
            }
            .info_desc {
              width: 192px;
              height: 40px;
              font-size: 12px;
              font-family: SourceHanSansSC, SourceHanSansSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #aed0ef;
              line-height: 20px;
            }
          }
          .zj_top {
            display: flex;
            height: 106px;
            .avatar {
              height: 100%;
              width: 106px;
              background-image: url("@/assets/img/zhaopiantouxiang.png");
              background-size: 100%;
            }
            .more {
              width: 100px;
              height: 100%;
              color: #fff;
              padding: 20px 0;
              .name {
                width: 80%;
                margin: 0 auto;
                height: 14px;
                background-image: url("@/assets/img/name_bg.png");
                background-size: cover;
                position: relative;
                margin-bottom: 20px;
                span {
                  position: absolute;
                  top: -10px;
                  left: 50%;
                  width: 100%;
                  transform: translateX(-50%);
                }
              }
              .desc {
                display: flex;
                justify-content: space-between;
                width: 100%;
                div {
                  width: 50%;
                }
              }
            }
          }
        }
      }
      .right_top_box {
        .chart_box {
          position: relative;
          .select_option {
            background: #012865;
            color: #009bff;
            border: 1px solid #009bff;
            height: 20px;
            width: 70px;
            font-size: 12px;
            outline: none;
            position: absolute;
            right: 5px;
            top: 5px;
            z-index: 10;
          }
          .chart_3 {
            width: 215px;
            height: 100%;
          }
        }
        .top_video {
          width: 315px;
          height: 100%;
          display: flex;
          justify-content: space-around;
          .video_box {
            .video_container {
              padding: 8px;
              margin: 14px 0;
              background-image: url("@/assets/img/kuang2.png");
              background-size: cover;
              height: 115px;
              position: relative;
              .video {
                width: 122px;
                height: auto;
              }
              img {
                width: 50px;
                height: 50px;
                z-index: 10;
                cursor: pointer;
              }
            }

            .v_title {
              width: 100%;
              height: 20px;
              text-align: center;
              line-height: 20px;
              color: #ffffff;
              font-size: 12px;
              background-image: url("@/assets/img/video_title_bg.png");
              background-size: cover;
            }
          }
        }
      }
      .title {
        color: #fff;
        font-size: 18px;
        text-align: left;
        height: 24px;
        img {
          width: 15px;
          height: auto;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          width: 80px;
          border-top: 1px dashed #aed0ef;
          margin: 0 20px;
          margin: 0 5px 0 20px;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>